<template>
  <div class="title-bg">
    <span class="icon-style dArrow-left" title="展开"  v-show="leftIcon" @click="handleDarrow(1)">
      <DArrowLeft style="width: 1em; height: 1em;" />
    </span>
    <span>{{ title }}</span>
    <span class="right icon-style" title="关闭" v-show="closeIcon" @click="handleIcon">
      <CircleClose style="width: 1em; height: 1em;" />
    </span>
    <span class="icon-style" title="收起" v-show="darrowIcon" @click="handleDarrow(2)">
      <DArrowRight style="width: 1em; height: 1em;" />
    </span>
  </div>
</template>
<script>
  import { defineComponent, reactive, toRefs, components } from 'vue';
  import congestion from '@/components/congestion/index.vue';

  export default defineComponent({
    components: { congestion },
    emits: ['handle-close', 'handle-darrow'],
    props: {
      title: {
        type: String,
        default: '',
      },
      closeIcon: {
        type: Boolean,
        default: false,
      },
      darrowIcon: {
        type: Boolean,
        default: false,
      },
    },
    setup(props, { emit }) {
      const state = reactive({
        leftIcon: false,
      })
      const handleIcon = () => {
        emit('handle-close')
      }
      const handleDarrow = (type) => {
        state.leftIcon = type == 1 ? false : true
        emit('handle-darrow', type)
      }
      return {
        ...toRefs(state),
        handleIcon,
        handleDarrow,
      };
    },
  });
</script>
<style lang="less" scoped>
  .title-bg {
    background: url(@/assets/images/basic/smallTitle.png) no-repeat;
    background-size: 100% 100%;
    height: 40px;
    padding-left: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    span {
      line-height: 40px;
      font-size: 17px;
      color: #fff;
      font-family: YouSheBiaoTiHei;
      text-shadow: 0px 0px 4px #4e85ff, 0px 1px 4px #0093ff;
    }
    .dArrow-left {
      position: absolute;
      left: 0.5%;
    }
    .right {
      margin: 0 10px 0 auto;
    }
    .icon-style {
      cursor: pointer;
      &:hover {
        transform: scale(1.2);
        color: #0093ff;
      }
    }
  }
</style>
